<template>
  <div class="status-div">
    <LineChart :option="option" :style="chartStyle"></LineChart>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LineChart from '@/components/Charts/LineChartX.vue'
import { useCarStore } from '@/stores/car-module'
import { storeToRefs } from 'pinia';

const carStore = useCarStore()
const { posXArr, posYArr, timeArr} = storeToRefs(carStore)
const chartStyle = {'height': '210px'}

const option = ref({
  backgroundColor: 'rgba(14, 14, 18, 0.8)', 
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['X', 'Y']
  },
  dataZoom: [
    {type: 'inside'},
    {
      type: 'slider',
      xAxisIndex: 0,
      minSpan: 5,
      height: 15
    }
  ],
  grid: {
    top: 10,
    bottom: 50,
    right: 50
  },
  xAxis: {
    type: 'category',
    data: timeArr
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'X',
      data: posXArr,
      type: 'line'
    },
    {
      name: 'Y',
      data: posYArr,
      type: 'line'
    }
  ]
});

</script>

<style lang="scss" scoped>
#car-chart-div {
  height: 200px;
}
</style>